<template>
  <div class="pb50">
    <!--  <swiper class="h375" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
              :duration="duration">
          <div v-for="(item, index) in images" :key="index">
              <swiper-item>
                  <img :src="img" class="w100p h100p" mode="aspectFill"/>
              </swiper-item>
          </div>
      </swiper>-->

    <SelfSwiper :imgUrls="images" :self_class="'h375'"></SelfSwiper>


    <div class="bgfff pl16 pr15 pb15 mb10">
      <p class="lh45">
        <span class="corange fs20 mr10">¥{{goodsPrice || goodsMsg.price}}</span>
        <!--<span class="fs12 ca8 line-through">¥199.9</span>-->
      </p>
      <div class="disflex jsbet">
        <p class="over_2 fs14 c38 fbold flex1">
          {{goodsMsg.name}}</p>
        <button class='w46 pl45 bgfff contentbox textr disflex align-cen textr ' @click="showShare" open-type="" hover-class="other-button-hover">
          <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/share.png" alt="" class="w15 h15 mr7">
          <b class="fs12 ca8">分享</b>
        </button>
      </div>
    </div>

    <!--规格-->
    <div class="pl16 pr16 bgfff pt16">
      <p class="fs14 ca8 pb10">类型</p>
      <div class="pb15">

                <span v-for="(v,k) in types"
                      class="fs12 c38  pl10 mb10 pr11 mr10 bgf5f6 disinblock lh30 bradius3 bf5f6 size_item"
                      :class="type_id_1 == v.specId ? 'active' : '' "
                      @click="type_tap_1(v.specId,k)"
                      :key="k">{{v.specName}}</span>

        <p class="fs14 ca8 pb10">规格</p>
        <div v-if="types[type_index_1] && types[type_index_1].goodSpecModelList">
                    <span v-for="(v2,k2) in types[type_index_1].goodSpecModelList"
                          class="fs12 c38  pl10 pr11 mr10 mb10 bgf5f6 disinblock lh30 bradius3 bf5f6 size_item"
                          :class="types[type_index_1].selectId == v2.specId ? 'active' : '' "
                          @click="type_tap(type_index_1,k2,v2.specId )"
                          :key="k2">{{v2.specAttribute}}</span>
        </div>
        <div class="disflex jsbet w267">
          <div class="fs14 ca8 pb10">数量</div>
          <div class="counter disflex number-change-btn-group">
            <span class="textc be8 lh25 w25 minus ca8"
                  @click.stop="prodChangeNum(-1)">
              <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/product-index/20190505113629.png" class="w10 h10"/>
            </span>
            <span class="bte8 bbe8 fs12 c68 w40 lh25 textc">
              <input type="number" v-model="num" class="lh22 h25">
            </span>
            <span class="textc be8 lh25 w25 add ca8"
              @click.stop="prodChangeNum(1)">
              <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/product-index/20190505113647.png" class="w10 h10"/>
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 宝贝详情 -->
    <div class="pl15 pr15">
      <p class="lh43 textc fs14 ca8">- 宝贝详情 -</p>
      <div class="h270 bgfff" v-html="goodsMsg.goodsDetails"></div>
    </div>

    <p class="lh43 textc fs12 ca8">- 到底了，看看其他的吧 -</p>


    <!--bottom-->

    <!--右边悬浮框-->
    <div class="index_float_right trans2 overhidden" >
      <RightFloat :bottom="60" :intoType="1" :specId="typeId"></RightFloat>
    </div>

    <!--购买-->
    <div class="disflex fix_bottom bte8" v-if=" goodsMsg.name">
      <div class="disflex flex1 bgfff textc">
        <div class="w33p pt7" @click="toProductList">
          <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/prod_select.png" alt="" class="w20 h20">
          <b class="cblue fs12 textc mt-4">产品</b>
        </div>
        <div class="w33p pt7" @click="makePhone">
          <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/tel_gray.png" alt="" class="w20 h20">
          <b class="ca8 fs12 textc mt-4">通话</b>
        </div>
        <div class="w33p pt7" @click="collect">
          <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/like_gray.png" alt="" class="w20 h20" v-if="!isCollect">
          <img src="http://one-stand.oss-cn-shanghai.aliyuncs.com/product-index/20190418161144.png" alt="" class="w20 h20" v-else>
          <b class="fs12 textc mt-4" :class="isCollect ? 'cblue' : 'ca8'">收藏</b>
        </div>
      </div>
      <div class="w220 disflex textc fs16 cfff pr15 pt5 pb5 borderbox bgfff lh40"  v-if="canbuy">
        <span class="w50p bg_line_yellow add_to_card" @click="addToCart">加入购物车</span>
        <span class="w50p bg_line_orange buy_now" @click="buynow">立即购买</span>
      </div>

      <div class="w220 bg_line_orange textc fs18 cfff lh49 disflex align-cen jscen" @click="toIM" v-else>
        <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/icon_message%403x.png" alt="" class="w24 h24 mr7">
        <span>立即咨询</span>
      </div>
    </div>
    <div v-if="showShareOrSave">
      <ShareOrSave
        :status="showShareOrSave"
        @closeModal="closeModal"
        @save="save"
        >
      </ShareOrSave>
    </div>
  </div>
</template>

<script>
  import SelfSwiper from '@/components/swiper' //
  import RightFloat from '@/components/rightFloat' // 订单项
  import ShareOrSave from '@/components/shareOrSave'
  import WXAJAX from '../../utils/request'
  import util from '../../utils/index';
  import { mapGetters } from 'vuex';

  export default {
    name: '',
    components: {SelfSwiper,RightFloat,ShareOrSave},
    data() {
      return {
        showShareOrSave: false, // 显示分享/保存下拉选框
        canbuy:true,//是否可以支付
        indicatorDots: true,
        autoplay: true,
        interval: 3000,
        duration: 500,
        img: 'https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/food.jpg',
        images: [],
        types: [
          {
            title: '类型',
            lists: [{name: '系统租用', id: '0'}, {name: '源码出售', id: 1}],
            selectId: 0,
          },
          {
            title: '规格',
            lists: [{name: '3000/年', id: 0}, {name: '10个／15斤装', id: 1}, {name: '一斤装', id: 2}],
            selectId: 0,
          }
        ],
        typeId:0,
        goodsPrice:'',
        goodId : 0 ,
        goodsMsg:{
          goodsDetails : '' ,
          name : '' ,
          price : '' ,
        },
        isCollect : false ,//是否收藏
        cardTel:'',
        type_id_1 : 0 ,//
        type_index_1 : 0 ,
        right_float_show:false ,//右边悬浮框
        cardId : 0 ,
        num: 1, // 加入购物车/直接下单的数量
        placeOrder : false
      }
    },
    mounted() {
      // 重置页面部分显示数据
      this.showShareOrSave = false;
      this.num = 1;
      this.images = [];
      this.goodsMsg = {
        goodsDetails : '',
        name : '',
        price : ''
      };
      // 判断是否存在 storage -- prod
      if (wx.getStorageSync('prod')){
        let prod = wx.getStorageSync('prod');
        this.images = prod.goodPhoto ? prod.goodPhoto.split(',') : [] ;
        this.goodsMsg = {
          goodsDetails : prod.goodsDetails,
          name : prod.goodsName,
          price : prod.price
        };
        wx.removeStorageSync('prod');
      }
      let query = this.$root.$mp.query ;
      console.log(query);
      if(query.cardId ){//从分享的商品页面进入
        this.cardId = query.cardId ;
        this.goodId = query.goodId ;
        this.cardTel = query.tel;
      }else{
        this.cardTel = wx.getStorageSync('CARDTEL') || '' ;
        this.goodId = this.$root.$mp.query.goodId || 0 ;
        this.cardId =wx.getStorageSync('CARDID') || 0 ;
      }
      this.checkCollect();
      this.getProdDetail();
      //this.getProdSize() ;
    },
    async onPullDownRefresh(){
      this.checkCollect();
      this.getProdDetail();
      setTimeout(()=>{
        wx.stopPullDownRefresh();
      }, 1*1000);
    },
    onPageScroll(){
      this.right_float_show = false ;
    },
    onShareAppMessage(e){
      this.addGoodsForwardRecord(this.cardId, this.goodId);

      return {
        path :'/pages/prodDetail/main?goodId='+this.goodId
          +'&cardId='+this.cardId
          + '&tel='+this.cardTel
          + '&goodId='+ this.goodId
          +'&companyId='+this.currentCompany.companyId
          +'&goType=1',
        success(e){
          wx.showShareMenu({
            withShareTicket : true
          })
        },
        fail(e){
          console.log('失败-- ',e);
        }
      }
    },
    methods: {
      showShare(){
        this.showShareOrSave = true;
      },
      closeModal(){
        this.showShareOrSave = false;
      },
      save(){
        let v = this ;
        wx.showLoading();
        WXAJAX.POST({
          specId    : v.typeId
        }, '', '/goods/goodsCard').then((data) => {
          wx.hideLoading();
          let url = WXAJAX.imgBackUrl + data;
          console.log(url)
          wx.getImageInfo({
            src: url,
            success: function (sres) {
              wx.saveImageToPhotosAlbum({
                filePath: sres.path,
                success: function (fres) {
                  wx.showToast({
                    title: '保存成功!',
                    icon: 'none'
                  });
                  console.log(fres);
                  v.closeModal();
                },
                fail(err){
                  wx.showToast({
                    title: '保存失败!',
                    icon: 'none'
                  });
                  console.log(err)
                }
              })
            }
          })
        }).catch((err) => {
          wx.hideLoading();
        })
      },
      prodChangeNum: function(n) {
        let num = parseInt(this.num.toString().replace(/[^\d]/g, '') || 0);
        this.num = num + n > 0 ? num + n : 1 ;
      },
      toIM(){
        wx.navigateTo({url:'/pages/IM/main?type=1'
            +'&cardId='+this.cardId
            +'&userId='+this.userId
            +'&logo='+this.currentCompany.logo
            +'&specId='+(this.typeId||'')
            +'&name='+this.currentCompany.name});
      },
      getProdDetail(refresh){
        let v = this ;
        const { parentId, specId } = this.$root.$mp.query;
        WXAJAX.POST({
          goodsId  : v.goodId,
          cardId: this.cardId,
          refresh: refresh || '',
        }, '', '/goods/getGoodsInfo').then((data) => {
          if(data){
            v.goodsMsg = {
              goodsDetails : data.goodsDetails ,
              name : data.goodsName ,
              price : data.price / 100,
            };
            v.goodsMsg.price = v.goodsMsg.price.toFixed(2);

            v.canbuy = data.ispayment == 1;
            data.goodPhoto && (v.images = data.goodPhoto.split(',') );
            if(data.goodSpecModelList){
              data.goodSpecModelList.forEach(function (i,k) {
                if(i.goodSpecModelList){//有二级分类
                  i.selectId = i.goodSpecModelList[0].specId ;
                  i.price = i.goodSpecModelList[0].price / 100;
                  i.price = i.price.toFixed(2);
                  i.specNum = i.goodSpecModelList[0].specNum ;
                }else{
                  i.selectId = i.specId ;
                  i.price = i.price / 100 ;
                  i.price = i.price.toFixed(2);
                }
              });
              v.types = data.goodSpecModelList ;
              v.type_id_1 = parentId || v.types[0].specId ;
              v.goodsPrice = v.types[0].price ;
              v.typeId = specId || v.types[0].selectId ;
              if(parentId) v.type_index_1 = data.indexOf(data.find(res=>res.specId==parentId));
              v.type_index_1 = v.type_index_1 == -1 ? 0 : v.type_index_1;
            }
          }
        }).catch((err) => {
          v.goodsMsg = {} ;
          v.images = [] ;
        })
      },
      getProdSize(){//查询产品规格
        let v = this ;
        const { parentId, specId } = this.$root.$mp.query;
        WXAJAX.POST({
          goodsId   : v.goodId,
        }, '', '/goods/getGoodSpec').then((data) => {
          if(data){
            data.forEach(function (i,k) {
              if(i.goodSpecModelList){//有二级分类
                i.selectId = i.goodSpecModelList[0].specId ;
                i.price = i.goodSpecModelList[0].price / 100;
                i.specNum = i.goodSpecModelList[0].specNum ;
              }else{
                i.selectId = i.specId ;
                i.price = i.price / 100 ;
              }
            });
            v.types = data ;
            v.type_id_1 = parentId || v.types[0].specId ;
            v.goodsPrice = v.types[0].price.toFixed(2) ;
            v.typeId = specId || v.types[0].selectId ;
            if(parentId) v.type_index_1 = data.indexOf(data.find(res=>res.specId==parentId));
            v.type_index_1 = v.type_index_1 == -1 ? 0 : v.type_index_1;
          }
        }).catch((err) => {
          v.typeId = 0 ;
          v.goodsPrice = '' ;
          v.types = [] ;
        })
      },
      checkCollect(){//
        WXAJAX.checkCollect({
          itemType : 1 ,
          itemId : this.goodId ,
        }).then((data)=>{
          this.isCollect = data.status ;
          console.log(this.isCollect);
        }).catch((err)=>{

        })
      },
      type_tap_1(id_1 , index_1){//点击一级分类
        this.type_id_1 = id_1 ;
        this.type_index_1 = index_1 ;
        this.type_tap(this.type_index_1, 0, this.types[this.type_index_1].goodSpecModelList[0].specId)
      },
      type_tap(index_1,index_2 , id) {
        wx.showLoading() ;
        this.types[index_1].selectId = id;
        let price = (this.types[index_1].goodSpecModelList[index_2].price / 100).toFixed(2),
          specNum = this.types[index_1].goodSpecModelList[index_2].specNum ;
        this.$set(this.types[index_1],'price',price);
        this.$set(this.types[index_1],'specNum',specNum);
        this.goodsPrice = price ;
        this.typeId = id ;
        wx.hideLoading();
      },
      toProductList(){
        wx.switchTab({url:'/pages/Product/main'});
      },
      page_turn(url){
        wx.navigateTo({url:'../'+url+'/main?type=3'});
      },
      buynow(){
        if(!this.placeOrder){
          this.placeOrder = true;
          let v = this ;
          // 考虑先将商品信息存入localStorage
          // 去新的页面从localStorage取商品信息渲染，然后
          WXAJAX.POST({
            goodsId  : v.goodId,
            cardId : v.cardId ,
            specId : v.typeId ,//规格ID
            num : v.num ,
            allPrice:v.goodsPrice * 100,//订单金额
          }, '', '/orders/directOrder').then((data) => {
          setTimeout(function () {v.placeOrder = false;
            wx.navigateTo({url:'../orderConfirm/main?orderId='+data});
          },500)
        }).catch((err) => {})
        }
      },
      collect(){//收藏

        wx.showLoading();
        let _url = '' ,
          _request = {} ;
        if(this.isCollect){//取消收藏
          _url = '/personal/delCollection' ;

        }else{//添加收藏
          _url = '/personal/addCollection' ;
        }
        _request = {
          itemType : 1 ,
          itemId : this.goodId ,
        };
        WXAJAX.POST(_request ,'', _url ).then((data)=>{
          if(data){
            this.isCollect = !this.isCollect ;
          }
          wx.hideLoading() ;
        }).catch((err)=>{
          wx.hideLoading() ;
        });
      },
      makePhone(){//拨打电话
        util.MakePhone(this.cardTel  || '');
      },
      addToCart(){//加入购物车
        /*  wx.showToast({
              title:'已加入购物车',
              icon:'none',
              duration:1000,
          });*/
        let v = this ;

        wx.showLoading();

        WXAJAX.POST({
          goodsId   : v.goodId,
          cardId : v.cardId ,
          specId : v.typeId ,//规格ID
          num : v.num ,
        }, '', '/orders/addShopcart').then((data) => {
          wx.hideLoading();
          if(data){
            wx.showToast({
              title:'成功！',
              icon:'success',
              duration:1000,
            });
          }
        }).catch((err) => {
          wx.hideLoading();
        })
      }
    },
    computed:{
      ...mapGetters(['currentCompany']),
    }
  }
</script>

<style>
  page {
    width: 100%;
    height: 100%;
    background: #F5F5F6;
  }

  .size_item.active {
    color: #51CDCB;
    background: #E5F8F7;
    border: 0.5px solid #51CDCB;
  }
  .add_to_card{
    border-radius: 20px 0 0 20px;
  }
  .buy_now{
    border-radius: 0 20px 20px 0;
  }
  .prod_detail_float>div{
    bottom: 100px;
  }
  .number-change-btn-group>span:first-child{
    line-height: 23px;
    border-radius: 5px 0 0 5px;
  }
  .number-change-btn-group>span:last-child{
    line-height: 23px;
    border-radius: 0 5px 5px 0;
  }
</style>





























